<template>
  <div class="quality-supervision">
    <div class="quality-supervision__select">
      <div class="quality-supervision__select-city">
        <el-select v-model="city" size="mini" @change="getData">
          <el-option
            v-for="(item, i) in cityList"
            :key="i"
            :label="item"
            :value="item"
            >
          </el-option>
        </el-select>
      </div>
      <div class="quality-supervision__select-date">
        <el-date-picker
          v-model="dayTime"
          type="month"
          :clearable="false"
          size="mini"
          value-format="yyyy-MM"
          format="yyyy年M月"
          @change="getData">
        </el-date-picker>
      </div>
    </div>
    <div class="quality-supervision__content">
      <div class="table-group">
        <table>
          <tr>
            <td colspan="5" class="head bg1">
              专项检查
            </td>
          </tr>
          <tr>
            <td>
              <p class="title">安全类检查次数</p>
            </td>
            <td>
              <p class="title">形象类检查次数</p>
            </td>
            <td>
              <p class="title">问题项数</p>
            </td>
            <td>
              <p class="title">总扣分</p>
            </td>
            <td>
              <p class="title">处理相关责任人数</p>
            </td>
          </tr>
          <tr>
            <td>
              <p class="num">{{milliFormat(zxjc.aqljccs)}}次</p>
            </td>
            <td>
              <p class="num">{{milliFormat(zxjc.xxljccs)}}次</p>
            </td>
            <td>
              <p class="num">{{milliFormat(zxjc.wtxs)}}项</p>
            </td>
            <td>
              <p class="num">{{milliFormat(zxjc.zkf)}}分</p>
            </td>
            <td>
              <p class="num">{{milliFormat(zxjc.clxgzrrs)}}人</p>
            </td>
          </tr>
        </table>
        <table>
          <tr>
            <td colspan="4" class="head bg2">
              例行检查
            </td>
          </tr>
          <tr>
            <td>
              <p class="title">月度检查次数</p>
            </td>
            <td>
              <p class="title">问题项数</p>
            </td>
            <td>
              <p class="title">总扣分</p>
            </td>
            <td>
              <p class="title">处理相关责任人数</p>
            </td>
          </tr>
          <tr>
            <td>
              <p class="num">{{milliFormat(lxjc.ydjccs)}}次</p>
            </td>
            <td>
              <p class="num">{{milliFormat(lxjc.wtxs)}}项</p>
            </td>
            <td>
              <p class="num">{{milliFormat(lxjc.zkf)}}分</p>
            </td>
            <td>
              <p class="num">{{milliFormat(lxjc.clxgzrrs)}}人</p>
            </td>
          </tr>
        </table>
        <table>
          <tr>
            <td colspan="3" class="head bg3">
              纪律监察
            </td>
          </tr>
          <tr>
            <td>
              <p class="title">监察次数</p>
            </td>
            <td>
              <p class="title">发现问题数</p>
            </td>
            <td>
              <p class="title">处理人数</p>
            </td>
          </tr>
          <tr>
            <td>
              <p class="num">{{milliFormat(jljc.jccs)}}次</p>
            </td>
            <td>
              <p class="num">{{milliFormat(jljc.fxwts)}}个</p>
            </td>
            <td>
              <p class="num">{{milliFormat(jljc.clrs)}}人</p>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import Vring from 'v-charts/lib/ring.common'
  import { Select, Option, DatePicker } from 'element-ui'
  import { getPzjc } from 'src/api/api'
  import { formatDate, milliFormat, getPreMonth, getLastMonth, getFirstDay } from 'js/utils'
  import storage from 'good-storage'
  export default {
    components: {
      [Vring.name]: Vring,
      [Select.name]: Select,
      [DatePicker.name]: DatePicker,
      [Option.name]: Option
    },
    data () {
      return {
        dayTime: '',
        cityList: storage.get('cityList'),
        city: storage.get('cityList')[0],
        zxjc: {},
        lxjc: {},
        jljc: {}
      }
    },
    mounted() {
      if(formatDate('yyyy-mm-dd', new Date()) === formatDate('yyyy-mm-dd', getFirstDay())) {
        this.dayTime = formatDate('yyyy-mm',getPreMonth(2))
      } else if(formatDate('yyyy-mm-dd', new Date()) === formatDate('yyyy-mm-dd', new Date(new Date().getFullYear(), new Date().getMonth(), 2))) {
        this.dayTime = formatDate('yyyy-mm',getPreMonth(2))
      } else {
        this.dayTime = getLastMonth()
      }
      this.getData()
    },
    methods: {
      milliFormat(num) {
        return milliFormat(num)
      },
      getData() {
        const params = {
          dayTime: this.dayTime,
          city: this.city
        }
        getPzjc(params).then(res=> {
          this.jljc = res.data.jljc
          this.lxjc = res.data.lxjc
          this.zxjc = res.data.zxjc
        })
      }
    }
  }
</script>
<style lang="scss">
  .quality-supervision {
    // padding-bottom: 20px;
    &__select {
      text-align: right;
      padding: 5px 30px 5px 0;
      font-size: 14px;
      display: flex;
      justify-content: flex-end;
      .el-select, .el-date-editor {
        .el-input__inner {
          // width: 150px;
          border: 0;
          border-radius: 0;
          background:rgba(11,21,58,1);
          box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
          color: #AAECFF;
          font-size: 14px;
        }
        .el-input__icon {
          color: #AAECFF;
          font-size: 14px;
        }
      }
      &-city {
        margin-right: 20px;
        .el-select {
          width: 100px;
        }
      }
      &-date {
        .el-date-editor {
          width: 135px;
        }
        .el-month-table td.today .cell {
          color: #606266;
          font-weight: normal;
        }
      }
    }
    &__content {
      .table-group {
        // width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        table {
          width: 95%;
          text-align: center;
          margin-bottom: 20px;
        }
        td {
          border: 1px solid #B3B3B3;
          box-sizing: border-box;
          line-height:30px;
        }
        .head {
          font-size: 16px;
          font-family:Microsoft YaHei;
          font-weight:bold;
          color:rgba(255,255,255,1);
          line-height:35px;
          box-sizing: border-box;
          height: 35px;
        }
        .title {
          font-size:12px;
          font-family:Adobe Heiti Std;  
        }
        .num {
          font-size:16px;
          font-family:Microsoft YaHei;
          font-weight:bold;
          color:rgba(255,99,126,1);
        }
        .bg1 {
          background: #C37A00;
          border: 1px solid #C37A00;
        }
        .bg2 {
          background: #0E962A;
          border: 1px solid #0E962A;
        }
        .bg3 {
          background: #0A8CFF;
          border: 1px solid #0A8CFF;
        }
      }
    }
  }
</style>